<html lang="ja">
<meta charset="UTF-8" />
<head>
<title>array 2 table</title>
<script type="text/javascript">

function $(name) { return document.getElementById(name); }

function getKeys(arr) {
	var keys = [];
	for (key in arr) {
		keys.push(key);
	}
	return keys;
}

function isEqual(a1, a2)
{
	if (a1 instanceof Array && a2 instanceof Array) {
		if (a1.length != a2.length) {
			return false;
		}
		for (var i=0; i<a1.length; ++i) {
			if (a1[i] != a2[i]) {
				return false;
			}
		}
		return true;
	}else {
		return false;
	}
}

window.onload = function () {
	
	var objs = [];
	
	objs.push( {a:1,b:2,c:3} );
	objs.push( {a:1,b:2,c:3} );
	
/*
	配列の内容を元にテーブル生成
	
	配列の要素が全部オブジェクトなら、最初の要素の項目でヘッダ生成
	後は配列の要素を行にしてテーブル生成
	
	オブジェクトが渡されたら、オブジェクトのメンバに対して処理を適用。
	
*/
	$("space").appendChild( arr2tbl(objs) );
	
	
}

function arr2tbl(arr)
{
	if (!(arr instanceof Array)) {
		return;
	}
	if (arr.length == 0) {
		return;
	}
	for (var i=0; i<arr.length; ++i) {
		if (!(arr[i] instanceof Object)) {
			return;
		}
	}
	// header
	var keys = getKeys(arr[0]);
	for (var i=1; i<arr.length; ++i) {
		var keys2 = getKeys(arr[i]);
		if (!isEqual(keys, keys2)) {
			return;
		}
	}
	
	var tbl = document.createElement("table");
	
	// row
	for (var i=0; i<arr.length; ++i) {
		var row = tbl.insertRow(-1);
		var o = arr[i];
		for (var j=0; j<keys.length; ++j) {
			var c = row.insertCell(-1);
			c.innerHTML = o[keys[j]];
		}
	}
	
	// head
	var hdr = tbl.createTHead();
	var row = hdr.insertRow(0);
	for (var i=0; i<keys.length; ++i) {
		var c = document.createElement('th');
		row.appendChild(c);
		c.innerHTML = keys[i];
	}
	
	return tbl;
}


</script>
<style type="text/css">
<!--
input { ime-mode: disabled; }

table {
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

-->
</style>
</head>
<body style="background-color:#aaa; line-height:150%;">

<div id="space"> </div>

<!--
<table id="fills" style="position:absolute; top:30px; left:30px; border-style:solid; border-width:1px;">
 <tr>
  <th>p1</th>
  <th>p2</th>
  <th>len</th>
 </tr>
 <tr>
  <td>0</td>
  <td>0</td>
  <td>0</td>
 </tr>
</table>
-->

</body>
</html>
